#category {
  .page {
    padding: 16px 0;
    overflow: hidden;
    @include card-page;
  }

  .content {
    display: grid;
    grid-column-gap: 16px;
    padding: 16px 16px 0;

    @include pc-layout {
      grid-template-columns: 1fr 1fr 1fr;
    }
    @include sp-layout {
      grid-template-columns: 1fr;
    }

    li {
      list-style: none;
      position: relative;
      margin-bottom: 16px;
      height: 160px;
      overflow: hidden;
      @include card-light;
      @include pc-layout {
        &:hover {
          .avatar {
            animation-play-state: paused;
            transform: rotateZ(360deg);
          }
        }
      }

      .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .meta {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: justify;
        text-shadow: 0 0 1px $bg-dark-deep;
        background-color: $bg-white-dim;

        > div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 16px 0;
          height: 114px;
        }

        .avatar {
          margin: 0;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          border: 4px solid $bg-white-dim;
          box-shadow: $card-shadow;
          background-color: $bg-dark;
          will-change: transform;
          transition: transform 1s ease-out;
        }

        span {
          padding: 0 12px;
          height: 40px;
          line-height: 40px;
          border-radius: 3px;
          box-shadow: $card-shadow-light;
          background-color: $bg-white-deep;
        }
      }

      p {
        position: absolute;
        bottom: 0;
        padding: 0 32px;
        width: 100%;
        height: 46px;
        line-height: 46px;
      }
    }
  }

  .clean {
    padding-left: 22px;
    text-align: left;

    .clean-btn {
      margin-left: 12px;
      padding: 5px 10px;
      border-radius: 3px;
      background-color: $bg-dark;
      transition: all 0.3s ease-out;
      color: $link-color;

      &:hover {
        background-color: $bg-dark-dim;
      }
    }
  }
}
